<template>
  <div class="chartcontent">
      <el-table 
          :data="tableData" 
          border
          stripe 
          style="width: 100%" 
          height="100%"
          v-loading=loading 
          class="box-table"
          @cell-click="clickData"
          @sort-change="sortChange"
          :header-cell-style='headerStyle'
          :row-style='rowStyle'
          :cell-style="cellStyle"
          >
            <el-table-column v-for="(key,index) in sourceKey" :prop="key" :key="index" :sortable="sortableIF(index)" :width="columnWidth(key)">
                <template slot="header">{{key_names[key]['name']}}</template>
                <template slot-scope="scope">
                  {{tableData[scope.$index][key]}}
                </template>
            </el-table-column>
           
        </el-table>
  </div>
</template>

<script>
// import LineChart from "./LineChart.vue";
import json_data from '../Utils/api.js';
let {localData,key_names } = json_data()
let sourceKey=["name","ts_code","hy","open","close","percent","huanshou","net_mf_amount","buy_elg_amount","buy_elg_percent","rps5",'circ_mv']

export default {
  name: "ChartRPS",
  props: ['type'],
  data() {
    return {
      sourceKey:[],
      key_names:[],
      tableData: [],
      loading:true,
      headerStyle:{
          'font-weight':'bold',
          'font-size':'13px',
          'height':'50px',
          'color':'#333333',
          // 'background-color': '#f9aa09',
          'text-align':'center'
      },
      rowStyle:{
          'font-weight':'normal',
          'font-size':'12px',
          'height':'45px',
          'text-align':'center'
      },
      spanArr: [], // 一个空的数组，用于存放每一行记录的合并数
      pos: 0, // spanArr 的索引
      contentSpanArr: [],
      position: 0
    }
  },
  beforeMount() {
    this.spanArr = [];
    this.contentSpanArr = [];
    this.sourceKey = sourceKey;
    this.key_names = key_names;
    let key = this.type+'_table'
    var jsonO=localData[key]
    this.tableData=jsonO
    this.fetchTableData()
  },
  methods: {
    async fetchTableData () {
      this.loading = false
      this.spanMethod(this.tableData)
    },
    columnWidth(key){
      return this.key_names[key]['width']

    },
    sortableIF(index){
      if (index>=5) {
        return "custom"
      }
      return false
    },
    objectSpanMethod({rowIndex, columnIndex }) {

      if (columnIndex === 2) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
      return {
          rowspan: 1,
          colspan: 1
      };
    },
    spanMethod(data){
        // 设定一个数组spanArr/contentSpanArr来存放要合并的格数，同时还要设定一个变量pos/position来记录
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr=[]
          this.contentSpanArr=[]
          this.spanArr.push(1);
          this.pos = 0;
          this.contentSpanArr.push(1);
          this.position = 0;
        } else {
          // 判断当前元素与上一个元素是否相同(第1列)
          let bankuai = data[i]['hy']
          let last_bankuai = data[i-1]['hy']
          if (bankuai === last_bankuai) {
            this.spanArr[this.pos] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            this.pos = i;
          }
        }
      }
    },
    cellStyle({rowIndex, columnIndex}) {//根据测试结果动态调整单元格样式，成功-绿色，失败-红色，不支持-黄色
      let color = "#555555"
      if (rowIndex>=0 ) {
          if (columnIndex ==5) {
            let percent = this.tableData[rowIndex]["percent"]
            let percent_n=Number(percent.split('%')[0])
            if (percent_n > 0 ) {
              color="red"
            }else{
              color="green"
            }
          }
          if (columnIndex ==7) {
              let net_mf_amount = this.tableData[rowIndex]["net_mf_amount"]
              let net_mf_amount_n=Number(net_mf_amount.split('万')[0])
              if (net_mf_amount_n > 0 ) {
                 color="red"
              }else{
                 color="green"
              }
          }  
      }

      let aa ={
          'color': color,
          'font-size':'12px',
          'text-align':'center'
      }
      return aa
      //              
    },
    compareDesc(propertyName,order) {
      return function(object1, object2) {
        var value1 = object1[propertyName];
        var value2 = object2[propertyName];
        if (propertyName == "net_mf_amount" || propertyName == "buy_elg_amount") {
          value1 = Number(value1.split("万")[0])
          value2 = Number(value2.split("万")[0])
        }

        if (propertyName == "circ_mv") {
          value1 = Number(value1.split("亿")[0])
          value2 = Number(value2.split("亿")[0])
        }
        if (propertyName == "percent" || propertyName == "huanshou" || propertyName == "buy_elg_percent") {
          value1 = Number(value1.split("%")[0])
          value2 = Number(value2.split("%")[0])
        }

        if (order == "descending") {
            if(value2 < value1) {
              return -1;
            } else if(value2 > value1) {
              return 1;
            } else {
              return 0;
            }
        }
        if (order == "ascending") {
            if(value2 < value1) {
              return 1;
            } else if(value2 > value1) {
              return -1;
            } else {
              return 0;
            }
        } 
      }
    },
    sortChange(column){
      console.log(column.prop);
      console.log(column.order);
      this.tableData = this.tableData.sort(this.compareDesc(column.prop,column.order))
    },
    clickData(row,column,cell) {   
      let aa = String(cell.innerHTML)

      if (aa.indexOf("SH") > -1 || aa.indexOf("SZ") > -1) {
        let code = row['ts_code']
        aa=code.split('.')
        let url= "https://xueqiu.com/S/"+aa[1]+aa[0]
        window.open(url);
      }
    }    
  }
}
</script>

<style>

.chartcontent{
  /* padding: 5px; */
  width: 100%;
  height: 98%;
  background-color: rgb(209, 189, 230);
  
}

.el-table__cell{
  padding:  0px !important;
  border-right:0px  !important;
  border-left:0px  !important;
}
.el-table__row>td{
  /* border: none !important; */
  border-right:0px  !important;
  border-left:0px  !important;
}


.el-table--border{
    border-right:0px  !important;
    border-left:0px  !important;
}
    
.el-table--border{
  border-right:0px  !important;
}
</style>
